<template>
  <div class="team-type-list">
    <div style="margin-bottom:12px; display:flex; gap:8px; align-items:center;">
      <el-button type="primary" @click="openAdd">新增类型</el-button>
      <el-button @click="fetchTeamTypeList" :loading="loading">刷新</el-button>
    </div>
    <el-table :data="teamtypelist" stripe @row-dblclick="openEdit">
      <el-table-column prop="teamTypeId" label="类型ID" width="120" />
      <el-table-column prop="teamTypeCode" label="类型编码" />
      <el-table-column prop="teamTypeName" label="类型名称" />
      <el-table-column label="操作" width="200" fixed="right">
        <template #default="{ row }">
          <el-button size="small" type="primary" text @click="openEdit(row)">编辑</el-button>
          <el-divider direction="vertical" />
          <el-button size="small" type="danger" text @click="confirmDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog v-model="dialogVisible" :title="isEdit ? '编辑类型' : '新增类型'" width="480px">
      <el-form :model="form" :rules="rules" ref="formRef" label-width="96px">
        <el-form-item label="类型名称" prop="teamTypeName">
          <el-input v-model="form.teamTypeName" placeholder="请输入类型名称" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible=false">取消</el-button>
        <el-button type="primary" :loading="saving" @click="save">保存</el-button>
      </template>
    </el-dialog>
  </div>
  
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getReadClient, getWriteClient } from '@/Urls/AxiosHelper'
import { ElMessage, ElMessageBox } from 'element-plus'

const teamtypelist = ref<any[]>([])
const loading = ref(false)

const dialogVisible = ref(false)
const saving = ref(false)
const isEdit = ref(false)
const editingId = ref<number | string | undefined>(undefined)
const formRef = ref()
const form = ref<any>({ teamTypeName:'' })
const rules = {
  teamTypeName: [{ required:true, message:'请输入类型名称', trigger:'blur' }],
}

async function fetchTeamTypeList(){
 try{
    const teamtyperead = getReadClient(1)
    const res = await teamtyperead.get('schedread/api/Team/GetTeamType')
    teamtypelist.value = res?.data?.data || []
  }catch(e){
    console.error('GetTeamType 调用失败', e)
  }
}

function openAdd(){
  isEdit.value = false
  editingId.value = undefined
  form.value = { teamTypeName:'' }
  dialogVisible.value = true
}

function openEdit(row:any){
  isEdit.value = true
  editingId.value = row?.teamTypeId ?? row?.TeamTypeId
  form.value = { teamTypeName: row?.teamTypeName ?? row?.TeamTypeName ?? '' }
  dialogVisible.value = true
}

function genCodeFromName(name:string){
  const s = String(name || '').trim()
  if(!s) return 'TT' + Date.now()
  return s.replace(/\s+/g,'').replace(/[^\w]/g,'-').toUpperCase().slice(0,32)
}

async function save(){
  try{
    // @ts-ignore
    await formRef.value?.validate()
    saving.value = true
    const write = getWriteClient(1)
    if (isEdit.value){
      if (editingId.value === undefined || editingId.value === null){
        ElMessage.error('缺少有效的 teamTypeId')
        return
      }
      await write.post('schedwrite/api/Team/UpdTeamType', {
        teamTypeId: editingId.value,
        teamTypeName: form.value.teamTypeName,
        teamTypeCode: genCodeFromName(form.value.teamTypeName),
      })
      ElMessage.success('修改成功')
    } else {
      await write.post('schedwrite/api/Team/AddTeamType', {
        teamTypeName: form.value.teamTypeName,
        teamTypeCode: genCodeFromName(form.value.teamTypeName),
      })
      ElMessage.success('新增成功')
    }
    dialogVisible.value = false
    fetchTeamTypeList()
  }catch(e:any){
    ElMessage.error(e?.message || (isEdit.value ? '修改失败' : '新增失败'))
  }finally{
    saving.value = false
  }
}

async function confirmDelete(row:any){
  const id = row?.teamTypeId ?? row?.TeamTypeId
  if (id === undefined || id === null){
    ElMessage.error('未找到可删除的 teamTypeId')
    return
  }
  try{
    await ElMessageBox.confirm('确认删除该类型吗？', '提示', { type:'warning', confirmButtonText:'删除', cancelButtonText:'取消' })
    const write = getWriteClient(1)
    await write.get('schedwrite/api/Team/DelTeamType', { params: { teamTypeId: id } })
    ElMessage.success('删除成功')
    fetchTeamTypeList()
  }catch(e:any){
    if(e !== 'cancel'){
      ElMessage.error(e?.message || '删除失败')
    }
  }
}

onMounted(()=>{
  fetchTeamTypeList()
})
</script>

<style scoped>
.team-type-list{
  padding: 20px;
}

.el-table{
  margin-top: 12px;
}
</style>


